import React from 'react'
import { Layout, Menu,Dropdown,Row,Col,Avatar,Badge} from 'antd';
import * as Icon from '@ant-design/icons';
import {withRouter} from 'react-router-dom';
import Logo from './logo/main.jpeg'
import {adminRoutes} from '../../routes/index'
import loginServer from '../../pages/loginService'
import "./index.css"
import{connect} from 'react-redux'
const { Header, Content, Sider } = Layout;
const adminRoute=adminRoutes.filter(route=>route.isShow);
const iconBc=(icon)=>
React.createElement(Icon[icon],{style:{fontSize:'16'}});

function index(props) {
const opMenu=(
  <Menu onClick={(value)=>{
    if(value.key==='3'){
      loginServer.clearToken();
      props.history.push('/login');
    }else if(value.key==='1'){
       props.history.push('/admin/notices');
    }
  }}>
  <Menu.Item key='1'>通知</Menu.Item>
  <Menu.Item key='2'>设置</Menu.Item>
   <Menu.Item key='3'>退出</Menu.Item>
  </Menu>
);
    return (
        <Layout>
    <Header className="header-ok"style={{backgroundColor: '#A2A25E'}}>
  
      <div className="logo">
           
      <img src={Logo} alt='logo'/>

      </div>
     
      <Dropdown overlay={opMenu} >
      <div >
      <Avatar>doge</Avatar>
      <Badge dot={!props.isAllRead}>
     <span>doge</span>
     </Badge>
     <Icon.SettingTwoTone  />
     </div>
                </Dropdown>
    </Header>
    <Layout>
      <Sider width={200} className="site-layout-background">
        <Menu
          mode="inline"
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          style={{ height: '100%', borderRight: 0 }}
        >
{
  adminRoute.map(route=>{
    return <Menu.Item key={route.path} icon={route.icon?iconBc(route.icon):''}  onClick={p=>props.history.push(p.key)}>
      {route.title}
      </Menu.Item>
      
  })
}
        </Menu>
      </Sider>
      <Layout style={{ padding: '16px' }}>
        {/* <Breadcrumb style={{ margin: '16px 0' }}>
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb> */}
        <Content
          className="site-layout-background"
          style={{
            color: 'c0c0c0',
            padding: 24,
            margin: 1,
            minHeight: 280,
          }}
        >
  {props.children}
        </Content>
      </Layout>
    </Layout>
  </Layout>
    )
}
const mapStateToProps=state=>state.storage;
 export default connect(mapStateToProps) ( withRouter (index))
